<template>
	<view class="main">
		<tn-popup v-model="show" mode="center">
			<view class="pop">
				<view class="bg" v-if="!state" @click="lingqu">
					<view class="name">{{name}}</view>
					<view class="title">恭喜发财</view>
				</view>
				<view class="bg1" v-else>
					<view class="title">恭喜您获得</view>
					<view class="center">
						<view class="price">
							<text class="p1">{{redUser.money}}</text>
							<text class="p2">海豚币</text>
						</view>
						<view class="p-title">已存入【我的钱包】</view>
					</view>
					<view class="btn" @click="goChongzhi">查看我的钱包</view>
				</view>
				<view class="xian"></view>
				<image src="/static/my/close.png" @click="show = false" mode=""></image>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	export default {
		props:{
			did:{
				type:Number | String
			},
			name:{
				type:String
			}
		},
		data() {
			return {
				show:false,
				state:false,
				redUser:''

			}
		},
		methods:{
			open(){
				this.show = true
			},
			async lingqu(){
				try{
					let result = await this.$request({
						loanding:0,
						method:'post',
						url:'/api/goods/open_hongbao',
						data:{
							id:this.did
						}
					})
					this.redUser = result.data.data
					this.state = true
				}catch(e){
					uni.showToast({
						title:e.data.msg,
						icon:'none'
					})
				}
				
			},
			goChongzhi(){
				uni.navigateTo({
					url:"/minePages/gift/chongzhi"
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.main{
		/deep/.tn-popup__content__center_box{
			background: transparent !important;
		}
	
		
		.pop{
			display: flex;
			flex-direction: column;
			align-items: center;
			.bg{
				width: 468rpx;
				height: 621rpx;
				background: url("https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/red.png") no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				.name{
					font-size: 26rpx;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 100rpx;
				}
				.title{
					font-size: 56rpx;
					font-weight: 800;
					color: #FFFFFF;
					margin-top: 24rpx;
				}
			}
			.bg1{
				width: 468rpx;
				height: 621rpx;
				background: url("https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/kaired.png") no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				padding: 80rpx 0 100rpx 0;
				.title{
					font-size: 32rpx;
					font-weight: 800;
					color: #ED9D03;
				}
				.center{
					.price{
						color: #F51C24;
						font-weight: bold;
						text-align: center;
						.p1{
							font-size: 88rpx;
						}
						.p2{
							font-size: 40rpx;
						}
					}
					.p-title{
						font-size: 24rpx;
						font-weight: bold;
						color: #F51C24;
						margin-top: 12rpx;
					}
				}
				.btn{
					width: 264rpx;
					height: 65rpx;
					background: #F5AF57;
					border-radius: 12rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #A95B09;
					text-align: center;
					line-height: 65rpx;
				}
			}
			.xian{
				width: 1px;
				height: 63rpx;
				border-left: 1px dashed #FFFFFF;
			}
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
</style>